<template>
	<div class="headerbox">
		<div>
            <i class="el-icon-arrow-left" style="cursor: pointer;padding-right:20px;" @click="$router.push('/examsetting')"></i>项目列表  <el-divider direction="vertical"></el-divider>
            <el-select v-model="casename" placeholder="请选择" @change="examchangevalue" style="width:300px;">
                    <el-option
                    v-for="item in examlist"
                    :key="item.nav5id"
                    :label="item.navsname"
                    :value="item.nav5id">
                    </el-option>
            </el-select> 
            <el-divider direction="vertical" style="padding-right:15px;"></el-divider>
            <el-select v-model="modelname" placeholder="请选择" @change="examchangevalue" style="width:100px;">
                    <el-option
                    v-for="item in modellist"
                    :key="item.itemCaseFlagId"
                    :label="item.itemCaseFlagName"
                    :value="item.itemCaseFlagId">
                    </el-option>
            </el-select> 
        </div>
        <span @click="$router.push('/mainexam/modelindex')" style="cursor: pointer;">返回首页</span>
	</div>
</template>

<script>
import {getExamList,modelItemcaselist} from '../api/api.js'
export default {
    data(){
        return{
            casename:'',
            options: [],
            examconobj:{},
            examobj:{
                page:1,
                pagesize:500,
                itemname:'',
                startdate:'',
                enddate:''
            },
            examlist:[],
            modellist:[],
        }
    },
    mounted(){
        this.examconobj = JSON.parse(sessionStorage.getItem('examContent'));
        this.casename = JSON.parse(sessionStorage.getItem('examContent')).navsname
        this.examclicklist()
        this.modelItemcaselistclick(this.examconobj.nav5id)
    },
    methods:{
        examchangevalue(val){
            this.$emit('examchangevalue',val)
        },
        //获取列表
        examclicklist(){
            getExamList(this.examobj).then(res=>{
                console.info(res)
                if(res.code==0){
                    this.examlist = res.obj.results.filter(item=>item.type!=2)
                }else{
                    this.$message.error(res.msg)
                }
            })
        },
        //获取模板科目modelItemcaselist
        modelItemcaselistclick(id){
            let obj={
                nav5id:id
            }
            modelItemcaselist(obj).then(res=>{
                console.info(res)
                if(res.code==0){
                    this.modellist = res.obj
                    this.modelname = res.obj.find(item=>item.itemCaseFlagId==this.$route.query.modelid).itemCaseFlagId
                }else{
                    this.$message.error(res.msg)
                }
            })
        },
        //跳转考试
        examclick(item){
            this.$router.push({path:'/exam',query:{id:item.id}})
        },
    }
}
</script>

<style scoped>
    .headerbox{
        min-width: 1200px; 
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height:50px;
        background:#165DFF;
        padding:0 20px;
        color:#fff;
        font-size:14px;
    }
    .headerbox >>> .el-select{
        /* margin-right: 20px; */
        background:none;
        color:#fff;
    }
    .headerbox >>> .el-select .el-input__inner{
        background:none;
        color:#fff;
        border:none;
        padding:0;
    }
    .headerbox >>> .el-select .el-input .el-select__caret{
        color:#fff;
    }
</style>